<template>
  <div class="Index">
    <div class="header">
      <input class="input" type="text" v-model="keyword" placeholder="搜索">
    </div>
    <van-tabs
      v-if="activeNav"
      :active="activeNav"
      @change="handleNavChange"
      sticky
      swipeable
    >
      <van-tab v-for="item in types" :key="item.value" :name="item.value" :title="item.name">
        <ListPanel :type="item.value" :activeNav="activeNav" :keyword="keyword" :reachBottomTime="reachBottomTime" :pullDownRefreshTime="pullDownRefreshTime" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import ListPanel from './ListPanel'

export default {
  components: {
    ListPanel,
  },
  data () {
    return {
      activeNav: '',
      reachBottomTime: Date.now(),
      pullDownRefreshTime: Date.now(),
      types: [
        {
          name: '待参与的',
          value: '1',
        },
        {
          name: '已参与的',
          value: '2',
        },
      ],
      keyword: '',
    }
  },
  onLoad (option) {
    this.activeNav = option.activeNav
  },
  onReachBottom () {
    this.reachBottomTime = Date.now()
  },
  onPullDownRefresh () {
    this.pullDownRefreshTime = Date.now()
  },
  methods: {
    handleNavChange (e) {
      this.activeNav = e.detail.name
    },
    handleAdd () {
      uni.navigateTo({
        url: '/pages/adviceForm/index',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.Index {
	.header {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 59px;
		background: #fff;

		.input {
			width: 690rpx;
			height: 35px;
			border-radius: 4px;
			text-align: center;
			background: #f2f0f0;

			&:focus {
				background: #000;
			}
		}

		.add-btn {
			width: 57px;
			border-radius: 4px;
			line-height: 35px;
			text-align: center;
			font-size: $fz-m;
			color: #fff;
			background: #e51e1e;

			&.hover {
				opacity: .8;
			}
		}
	}
}
</style>
